<template>
    <div class="lplp">
         <van-loading size="24px" vertical class="jijiaaiaai" v-if="getgolistdd=='' ">加载中...</van-loading>
        <div class="detailtojk" v-if="getgolistdd!='' ">
         <div class="detatop">
             <div class="ping">
                  <div :class="['detailhead', { xian: topda==true}]">
                        <div class="left">
                             <span class="iconfont icon-xiangzuo"  @click="$router.push('/Home')"></span>
                             <span class="popui" v-show="tophes" >
                                 <span class="iconfont ti"  >
                                    <div v-if="getgolistdd" >
                                        <img v-lazy="getgolistdd.user.user_photo" alt="">
                                    </div>
                                </span>
                                <span class="iconfont ty" @click="guangzhuto" >
                                    <div v-show="getgolistdd.guangzu==false">
                                        关注
                                    </div>
                                    <div class="guan tr"  v-show="getgolistdd.guangzu==true">
                                        已关注
                                    </div>
                                </span>
                             </span>
                        </div>
                        <div class="right">
                            <span class="iconfont icon-pengyouquan"></span>
                            <span class="iconfont icon-weixin"></span>
                            <span class="iconfont icon-dian1" ></span>
                        </div>
                  </div>
             </div>
             <div class="mv" v-if="getgolistdd">
                <video 
                    ref="videopu"
                    controls
                    style="width= 100%; height=100%; object-fit: fill"
                    :src="getgolistdd.vfurl"
                >
                <!--   -->
                </video>
             </div>
         </div>
         <div class="detamin" ref="scorll_top">
            <div class="description"  v-if="getgolistdd">
                <h3>
                    <span>{{getgolistdd.title}}</span>
                </h3>
                <div class="pito">
                    <span>精品</span>
                    <span class="iconfont icon-dian"></span>
                    <span>独家</span>
                    <span class="iconfont icon-dian"></span>
                    <span>浏览 {{getgolistdd.vc}}</span>
                    <span class="iconfont icon-dian"></span>
                    <span>收藏 {{getgolistdd.views_count_text}}</span>
                </div>
            </div>
            <hr style="width:96.7%;height: 0px;border: 0.5px solid #F0F0F0; margin: auto;">
            <div class="nametos" ref="scorll_toptows" >
                <div class="left" >
                    <div class="img" v-if="getgolistdd">
                        <img v-lazy="getgolistdd.user.user_photo" alt="">
                    </div>
                    <div class="h" v-if="getgolistdd.user">
                        <span>{{getgolistdd.user.nickname}} &nbsp;</span><span>lv.5</span>
                    </div>
                </div>
                <div class="right"  @click="guangzhuto" v-if="getgolistdd">
                    <div class="attention"   v-show="getgolistdd.guangzu == false">
                        关注
                    </div>
                    <div class="attention tr" v-show="getgolistdd.guangzu == true">
                        已关注
                    </div>
                </div>
            </div>
            <div class="writer" v-if="getgolistdd">
                <p>
                    {{getgolistdd.cookstory}}
                </p>
            </div>
            <div class="grade" v-if="getgolistdd">
                <div class="gradeleft">
                    <span class="iconfont icon-shizhong"></span>
                    <span>{{getgolistdd.cook_time}}</span>
                </div>
                <div class="graderight">
                    <span class="iconfont icon-xingxing3"></span>
                    <span>{{getgolistdd.cook_difficulty}}</span>
                </div>
            </div>
            <div class="gradeul" v-if="getgolistdd">
                <h3 >
                    <span class="wen">食材清单</span>
                </h3>
                <div class="puoplo">
                    <div class="gradeli" v-for="(item,index) in getgolistdd.major" :key="index">
                        <span class="wen">{{item.title}}</span>
                        <span class="dan">{{item.note}}</span>
                    </div>
                </div>
            </div>
            <div class="procedure" v-if="getgolistdd">
                <hr style="width:96.7%;height: 0px;border: 0.5px solid #F0F0F0;margin: auto;">
                <h3>
                    <span class="wen">烹饪步骤</span>
                    <!-- <span class="dan">点击进入图片烹饪模式</span> -->
                </h3>
                <div class="procedureli" v-for="(item,index) in getgolistdd.cookstep" :key="index">
                    <p><span>步骤</span><span>{{index+1}}/{{getgolistdd.cookstep.length}}</span></p>
                    <div class="img">
                        <img v-lazy="item.image" alt="">
                    </div>
                    <div class="text">
                        <span>{{item.content}}</span>
                    </div>
                </div>
                <div class="procedur">
                    <p>{{getgolistdd.create_time}}</p>
                </div>
                <div class="tips">
                    <h3>
                        小贴士
                    </h3>
                    <p>
                        不同食材用量不同哦
                    </p>
                </div>
            </div>
            <div class="procbottonto">
                <div class="botn" @click="bofangxiangji">
                    <span class="iconfont icon-xiangji"></span><span>传学做</span>
                </div>
            </div>
         </div>
         <div class="remindertos">
             <div class="bontss">
                 <div class="input">
                    <div class="pu">说点什么</div>
                 </div>
                 <div class="review" @click="pingluntogo">
                     <span class="iconfont icon-pinglun-"></span>
                     <span>评论</span>
                 </div>
                 <div class="enshrine">
                     <span class="iconfont icon-shoucang1 ry" @click="gosoucahng" v-show="getgolistdd.shucahngto == true"></span>
                    <span class="iconfont icon-shoucang1" @click="gosoucahng" v-show="getgolistdd.shucahngto == false"></span>
                    <!-- <span class="iconfont icon-shoucang1"></span> -->
                    <span>收藏</span>                                  
                 </div>
                 <div class="learn">
                    <span class="iconfont icon-xiangji"></span>
                    <span>传学做</span>     
                 </div>
             </div>
         </div>
      </div>
 </div>
</template>

<script>
import Vue from 'vue';
import { ShareSheet } from 'vant';
import { Toast } from 'vant';
// import { Lazyload } from 'vant';
import { Loading } from 'vant';
Vue.use(Loading);
Vue.use(ShareSheet);
import {getmendetails} from "../../api/menudetails";
export default {
   data(){
       return{
            topda:true,//定补背景变白
            tophes:true,//顶部显示头像
            showShare: false,
            showPopover:false,
            getgolistdd:'',
            thisgtoid:3145896,
            options: [
                { name: '微博', icon: 'weibo' },
                { name: '复制链接', icon: 'link',},
                { name: '分享海报', icon: 'poster' },
                { name: '二维码', icon: 'qrcode' },
              
            ],
       }
   },
   methods:{
        getwindows(){
            window.addEventListener('scroll', this.handleScroll, true)  
        },
        handleScroll(){
            // let tops = this.$refs.scorll_top.getBoundingClientRect().top;
            console.log('滚动高度', window.pageYOffset)  
            console.log('距离顶部高度', this.$refs.scorll_top.getBoundingClientRect().top)  
            
            let tops = this.$refs.scorll_top.getBoundingClientRect().top;
            if( tops <= 150){
                // console.log("123");
                this.topda = true;
            }else{
                this.topda = false;
            }
            console.log(tops)
            let topsp = this.$refs.scorll_toptows.getBoundingClientRect().top;
            // let video = this.$refs.videopu;
            // console.log(video)
            // console.log(tops)
            if(topsp <= 0){
                this.tophes=true;
                this.pause();
            
            }else{
                this.tophes = false;
            }
            
        }, 
        playto(){
            // let myVideo = this.$refs.videopu;
            // myVideo.play();
        },
        pause(){
            let myVideo = this.$refs.videopu;
            myVideo.pause();
        },
        bofangxiangji(){
            Toast("请启用相机");
        },
        fengxing(){
            this.showShare=true
        },
        onSelect(option){
        Toast(option.name);
        this.showShare = false;
        console.log(this.showShare)
        },
        overlay(){
            this.showShare = false;
        },
        cancel(){
            this.showShare = false;
        },
        //菜谱详情
        getmendeta(){
              console.log("传",this.$route.params.data)
              let recipeid ;
                if(this.$route.params.data){
                    recipeid =this.$route.params.data ;
                }else{
                    let detailmv = JSON.parse(sessionStorage.getItem('detailmv'));//取数据
                    recipeid = detailmv;
                }
            getmendetails(recipeid).then(data=>{
                console.log("菜谱详情",data)
                this.getxiangqingto = data ;

                let lsitsadd = new Set([this.getxiangqingto.result.recipe])
                    for (let e of lsitsadd) {
                            let {cook_difficulty,
                              cook_time,cookstep,cook_id,cookstory,create_time,
                              major,nutrition_facts,user,vc,views_count_text,
                              title,photo_path,vfurl} =e;
                            let data = {
                                cook_difficulty:cook_difficulty,
                                cook_time:cook_time,
                                cookstep:cookstep,
                                cook_id:cook_id,
                                cookstory:cookstory,
                                create_time:create_time,
                                major:major,
                                nutrition_facts:nutrition_facts,
                                user:user,
                                vc:vc,
                                views_count_text:views_count_text,
                                title:title,
                                photo_path:photo_path,
                                vfurl:vfurl,
                                guangzu:false,
                                shucahngto:false

                            } 
                        console.log("caipu",data)
                      //搜藏
                      let collectcooklistto = JSON.parse(sessionStorage.getItem('collectcooklistmv'));//取数据
                      if(collectcooklistto){
                          let indexto = collectcooklistto.findIndex(item =>item.id==data.cook_id)
                          if(indexto!=-1){
                             data.shucahngto=true;
                          }
                      }
                        //关注
                       let attentionlisttopp = JSON.parse(sessionStorage.getItem('attentionlistmv'));//取数据
                        if(attentionlisttopp){
                          let indextoop = attentionlisttopp.findIndex(item =>item.id==data.cook_id)
                          if(indextoop!=-1){
                             data.guangzu=true;
                          }
                        }
                        this.getgolistdd=data
                    }
            })
            // {recipeid:3145896}
        },
        //关注
        guangzhuto(){
            this.getgolistdd.guangzu=!this.getgolistdd.guangzu;
                if(this.getgolistdd.guangzu==true){
                    let data = {
                            cook_difficulty:this.getgolistdd.cook_difficulty,
                            cook_time:this.getgolistdd.cook_time,
                            cookstep:this.getgolistdd.cookstep,
                            cook_id:this.getgolistdd.cook_id,
                            cookstory:this.getgolistdd.cookstory,
                            create_time:this.getgolistdd.create_time,
                            major:this.getgolistdd.major,
                            nutrition_facts:this.getgolistdd.nutrition_facts,
                            user:this.getgolistdd.user,
                            vc:this.getgolistdd.vc,
                            views_count_text:this.getgolistdd.views_count_text,
                            title:this.getgolistdd.title,
                            photo_path:this.getgolistdd.photo_path,
                            guangzu:this.getgolistdd.guangzu,
                            shucahngto:this.getgolistdd.shucahngto

                        } 
                    let attentionlistto = JSON.parse(sessionStorage.getItem('attentionlistmv'));//取数据
                    if(attentionlistto){
                            let im = attentionlistto.findIndex(item=>item.id==data.id);
                            if(im==-1){
                                attentionlistto.push(data);
                                window.sessionStorage.setItem('attentionlistmv',JSON.stringify(attentionlistto));//存数据
                            }
                        
                    }else{
                        let  attentionlistplss= [];
                        attentionlistplss.push(data);
                        window.sessionStorage.setItem('attentionlistmv',JSON.stringify(attentionlistplss));//存数据
                    }
                }
                if(this.getgolistdd.guangzu==false){
                        let attentionlistto = JSON.parse(sessionStorage.getItem('attentionlistmv'));//取数据
                        if(attentionlistto){
                        let im = attentionlistto.findIndex(item=>item.id==this.getgolistdd.cook_id);
                        if(im!=-1){
                            attentionlistto.splice(im,1);
                            window.sessionStorage.setItem('attentionlistmv',JSON.stringify(attentionlistto));//存数据
                            
                        }
                }
        }

        },
        //收藏
        gosoucahng(){
                this.getgolistdd.shucahngto =!this.getgolistdd.shucahngto;

                if(this.getgolistdd.shucahngto==true){
                    let data={
                            a:this.getgolistdd.user,
                            id:this.getgolistdd.cook_id,
                            img:this.getgolistdd.photo_path,
                            title:this.getgolistdd.n,
                            shucahngto:this.getgolistdd.shucahngto
                        }
                    let collectcooklistto = JSON.parse(sessionStorage.getItem('collectcooklistmv'));//取数据
                    if(collectcooklistto){
                        let ppop = collectcooklistto.findIndex(item=>item.id==data.id)
                        if( ppop == -1){
                            collectcooklistto.push(data)
                            window.sessionStorage.setItem('collectcooklistmv',JSON.stringify(collectcooklistto));//存数据
                        }
                    }else{
                        let collectcooklistpto = []; //收藏菜谱数据；
                        collectcooklistpto.push(data)
                        window.sessionStorage.setItem('collectcooklistmv',JSON.stringify(collectcooklistpto));//存数据
                    }
                }
                if(this.getgolistdd.shucahngto==false){
                    let attentionlistto = JSON.parse(sessionStorage.getItem('collectcooklistmv'));//取数据
                    if(attentionlistto){
                        let im = attentionlistto.findIndex(item=>item.id==this.getgolistdd.cook_id);
                        if(im!=-1){
                            attentionlistto.splice(im,1);
                            window.sessionStorage.setItem('collectcooklistmv',JSON.stringify(attentionlistto));//存数据
                            
                        }
                    }
                }
        },
        //评论
        pingluntogo(){
            let idto = this.getgolistdd.cook_id;
            console.log(idto)
          window.sessionStorage.setItem('pinglunid',JSON.stringify(idto));//存数据
          // this.$router.push('/detail')
          // let detail = JSON.parse(sessionStorage.getItem('detail'));//取数据
          this.$router.push({name:"pingluntosv",params:{data:idto }})
          //  this.$router.push('/pingluntosv')
        }

    },
    created(){
        this.getmendeta();
    },
    mounted(){
        // this.getwindows();
    },
    destroyed(){
        // window.removeEventListener('scroll',this.handleScroll);   //  离开页面清除（移除）滚轮滚动事件
    },
   
}
</script>

<style lang="less">
.lplp{
     position: absolute;
        width: 100%;
        height: 100%;
        background-color: #ffff;
        z-index: 999;
}
    .detailtojk{
        width: 100%;
        height: 100%;
        position: relative;
        background-color: #ffff;
        z-index: 30;
        padding-bottom: 60px;
        
        .detatop{
            width: 100%;
            max-height: 330px;
            // height: 230px;
            // background-image: url('https://img2.baidu.com/it/u=874978404,1243508837&fm=26&fmt=auto');
            background-size: 100%  100%;
            background-position: center;
            background-repeat: no-repeat;
            .poty{
                width: 100%;
                // height: 50px;
            }
            .mv{
                width: 100%;
                min-height: 210px;
                max-height:300px;
                z-index: 10;
                video{
                    width: 100%;
                    height: 100%;
                }
            }
            .ping{
                width: 100%;
                height: 50px;
                z-index: 20;
            }
            .detailhead{
                width: 100%;
                height: 50px;
                padding: 10px;
                position:fixed;
                box-sizing: border-box;
                display: flex;
                color:#fffeff;
                opacity: 1;
                z-index:30 ;
                justify-content: space-between;
                &.xian{
                    background-color: #ffff;
                    color: #000000;
                    border-bottom: 1px solid rgb(243, 245, 252);
                }
                .left{
                    width: 40%;
                    height: 100%;
                    text-align: center;
                    line-height: 30px;
                    display: flex;
                    justify-content: space-between;
                    span{
                        // flex: 1;
                        height: 100%;
                        display: block;
                        font-size: 24px;
                        &.icon-xiangzuo{
                            text-align: left;
                        }
                        &.popui{
                            display: flex;
                            justify-content:space-between;
                            width: 65%;
                        }
                        &.ti{
                            div{
                                img{
                                    width: 27px;
                                    height: 27px;
                                    border-radius: 50%;
                                }
                            }
                        }
                        &.ty{
                           div{
                               width: 50px;
                               height: 27px;
                               text-align: center;
                               line-height: 27px;
                               border-radius: 20px;
                               background-color: #ffc536;
                               font-size: 10px;
                               &.tr{
                                    background-color: #92918d;
                                    color: #f5f5f5;
                                }
                           }
                        }
                    }
                }
                .right{
                    width: 40%;
                    height: 100%;
                    display: flex;
                    justify-content:space-between;
                    span{
                        flex:1;
                        height: 100%;
                        display: block;
                        text-align: center;
                        line-height: 30px;
                        font-size: 24px;
                        // &.icon-dian1{
                        //     // .van-share-sheet__options{
                        //     //     justify-content: center;
                        //     // }
                        //     // .van-share-sheet__name{
                        //     //     font-size: 12px;
                        //     // }
                        //     // .van-share-sheet__cancel{
                        //     //     color: #000000;
                        //     // }
                        // }
                         
                    }
                
                }
            }
        }
        .detamin{
            width: 100%;
            
            // box-sizing: border-box;
            .description{
                width: 100%;
                padding: 10px;
                // padding-right: 10px;
                box-sizing: border-box;
                height: 60px;
                h3{
                    width: 100%;
                    height: 25px;
                    font-size: 22px;
                    line-height: 25px;
                    overflow: hidden;
                }
                .pito{
                    width: 100%;
                    height: 20px;
                    font-size: 12px;
                    color:#727272;
                    font-weight: 600;
                    line-height: 16px;
                    span{
                        &.iconfont{
                            font-size: 12px;
                        }
                    }
                }
            }
            .nametos{
                width: 100%;
                height: 60px;
                padding-left: 10px;
                padding-right: 10px;
                box-sizing: border-box;
                margin-top: 10px;
                display: flex;
                justify-content: space-between;
                .left{
                    width: 70%;
                    height: 100%;
                    display: flex;
                    .img{
                        width: 20%;
                        height: 100%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        img{
                            width: 45px;
                            height: 45px;
                            border-radius: 50%;
                        }
                    }
                    .h{
                        width: 70%;
                        height: 100%;
                        padding-left: 10px;
                        box-sizing: border-box;
                        line-height: 60px;
                        font-size: 14px;
                        font-weight: 600;
                    }
                }
                .right{
                    width: 25%;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    .attention{
                        height: 30px;
                        line-height: 30px;
                        width: 70px;
                        background-color: #ffc536;
                        text-align:center;
                        font-size: 14px;
                        border-radius: 20px;
                        font-weight: 600;
                    }
                    .tr{
                        background-color: #92918d;
                        color: #f5f5f5;
                    }
                }
            }
            .writer{
                width: 100%;
                margin-top: 10px;
                padding: 10px;
                box-sizing: border-box;
                overflow: hidden;
                p{
                    font-size:16px;
                    line-height:25px;
                    // text-indent:2em
                }
            }
            .grade{
                background-color: #f7f5f7;
                border-radius: 8px;
                width: 96%;
                margin: auto;
                margin-top: 20px;
                margin-bottom: 20px;
                height: 40px;
                font-size: 14px;
                // font-weight: 600;
                display: flex;
                justify-content: space-around;
                align-items: center;
                .gradeleft{
                    width: 45%;
                    height: 100%;
                    text-align: center;
                    line-height: 40px;
                    span{
                        &.iconfont{
                            font-size: 20px;
                            margin-right: 8px;
                            color: #9a9a9a;
                        }
                    }
                }
                .graderight{
                    width: 45%;
                    height: 100%;
                    text-align: center;
                    line-height: 40px;
                    span{
                        &.iconfont{
                            font-size: 20px;
                            margin-right: 5px;
                            color: #9a9a9a;
                        }
                    }
                }
            }
            //食材
            .gradeul{
                margin-top: 10px;
                width: 100%;
                padding-left: 10px;
                padding-right: 10px;
                box-sizing: border-box;
                h3{
                    width: 100%;
                    height: 30px;
                    display: flex;
                    
                    justify-content: space-between;
                    span{
                        display: block;
                        line-height: 30px;
                        &.wen{
                            font-size: 16px;
                            font-weight: 600;
                        }
                        &.dan{
                            font-size: 10px;
                             color: #63a0a7;

                        }
                    }
                }
                .puoplo{
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    flex-wrap:wrap;
                    .gradeli{
                            width: 50%;
                            margin-top: 10px;
                            padding-left: 10px;
                            padding-right: 10px;
                            box-sizing: border-box;
                            height: 30px;
                            display: flex;
                            justify-content: space-between;
                        span{
                            display: block;
                            line-height: 30px;
                            &.wen{
                                font-size: 16px;
                                color: #63a0a7;
                                height: 100%;
                                overflow: hidden;
                            }
                            &.dan{
                                font-size: 12px;
                                height: 100%;
                                overflow: hidden;
                            }
                        }
                    }
                }

            }
            .procedure{
                margin-top: 20px;
                width: 100%;
               
                h3{
                    width: 100%;
                    padding-left: 10px;
                    padding-right: 10px;
                    box-sizing: border-box;
                    margin-top: 10px;
                    height: 30px;
                    display: flex;
                    justify-content: space-between;
                    span{
                        display: block;
                        line-height: 30px;
                        &.wen{
                            font-size: 16px;
                            font-weight: 600;
                        }
                        &.dan{
                            font-size: 10px;
                             color: #63a0a7;

                        }
                    }
                }
                .procedureli{
                    width: 100%;
                    margin-top: 15px;
                    border-radius: 8px;
                    padding-top: 5px;
                    padding-bottom: 5px;
                    // box-shadow: 0px 0px 0px 1px #ccc8c8;
                    p{
                        width: 100%;
                        height: 20px;
                        line-height: 20px;
                        font-size: 14px;
                        padding-left: 5px;
                        box-sizing: border-box;
                        // font-weight: 600;
                        overflow: hidden;
                       
                        // margin-bottom: 10px;
                    }
                    .img{
                        width: 100%;
                        // border-radius: 10px;
                        margin: auto;
                        overflow: hidden;
                        img{
                            width: 100%;
                            border-radius: 10px;
                        }
                    }
                    .text{
                        // margin-top: 6px;
                        width: 100%;
                        padding-top: 6px;
                        padding-bottom: 5px;
                        padding-left: 5px;
                        box-sizing: border-box;
                        font-size: 16px;
                        background-color: #eeebeb30;
                        // border-bottom: 1px solid #000000;
                    }
                }
            }
          
            .procedur{
                margin-top: 5px;
                width: 100%;
                padding-left: 10px;
                padding-right: 10px;
                box-sizing: border-box;
                height: 20px;
                text-align: left;
                font-size: 10px;
                color:#cdcdcd;
            }
            .tips{
                width: 96%;
                margin: auto;
                margin-top: 10px;
                background-color: #cdcdcd36;
                border-radius: 8px;
                h3{
                    width: 100%;
                    height: 25px;
                    text-align: left;
                    line-height: 27px;
                    font-size: 18px;
                    color: #ffc533;
                    font-weight:440;
                    padding-left: 6px;
                    box-sizing: border-box;

                }
                p{
                    margin-top: 5px;
                    padding-left: 10px;
                    box-sizing: border-box;
                    font-size: 14px;
                    padding-bottom: 5px;
                }
            }
            .procbottonto{
                width: 100%;
                margin-top: 20px;
                height: 47px;
                .botn{
                    width: 96%;
                    margin: auto;
                    border-radius: 25px;
                    height: 47px;
                    text-align: center;
                    line-height: 47px;
                    background-color: #ffc533;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    span{
                        font-size: 14px;
                         &.iconfont{
                            font-size: 24px;
                            margin-right: 10px;
                        }
                    }
                   
                }
               
            }

        }
        .remindertos{
            width: 100%;
            position: fixed;
            bottom: 0;
            left: 0;
            background-color: #ffff;
            height: 60px;
            padding: 10px;
            box-sizing: border-box;
           
            box-shadow:0 0 2px rgb(223, 222, 222);
            .bontss{
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .input{
                    width: 30%;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    .pu{
                        width: 100%;
                        height: 30px;
                        text-align: left;
                        box-sizing: border-box;
                        padding-left: 10px;
                        line-height: 32px;
                        border-radius: 20px;
                        background-color: #f5f5f5;
                        font-size: 14px;
                        font-weight: 600;
                        color:#a9a9a9;
                    }
                }
                .review{
                    width: 20%;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    span{
                        font-size: 14px;
                        font-weight: 550;
                        color:#474747;
                        &.iconfont{
                            font-size: 20px;
                            margin-left: 2px;
                        }
                    }
                }
                .enshrine{
                    width: 20%;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    span{
                        font-size: 14px;
                        font-weight: 550;
                        color:#474747;
                        &.iconfont{
                            font-size: 20px;
                            margin-left: 2px;
                        }
                        &.ry{
                            color: red;
                        }
                    }
                }
                .learn{
                    width: 20%;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    span{
                        font-size: 14px;
                        font-weight: 550;
                        color:#474747;
                        &.iconfont{
                            font-size: 20px;
                            margin-left: 2px;
                        }
                    }
                }
            }
        }
       
    }
    .jijiaaiaai{
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -24px;
            margin-top: -24px;
            z-index: 99;
            
        }
    
</style>